<template>
	<view>
		<!-- 顶部导航栏 -->
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<block slot="content">编辑邮箱</block>
		</cu-custom>
		<!-- 消息提示 -->
		<message ref="message"></message>

		<!-- 核心内容 -->
		<form class="cu-card" @submit="handleBandEmail">
			<view class="cu-form-group">
				<view class="title">新邮箱地址</view>
				<input v-model="emailForm.number" placeholder="请输入新邮箱地址" name="email"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">验证码</view>
				<input v-model="emailForm.code" placeholder="请输入验证码" name="input"></input>
				<button class='cu-btn bg-green shadow'
					@click="handleSendEmailCode">{{time==180? '获取验证码':time+' s'}}</button>
			</view>

			<view class="padding flex flex-direction">
				<button class="cu-btn bg-green lg" form-type="submit">确认修改</button>
			</view>
		</form>


		<!-- 行为验证码 -->
		<verify ref="verify" :captchaType="'clickWord'" :imgSize="{ width: '260px', height: '135px' }"
			@success="sendEmailCode">
		</verify>
	</view>
</template>

<script>
	import Verify from '@/components/verify/verify.vue'
	import graceChecker from '@/common/graceChecker.js'
	import {
		sendEmailCode,
		bandEmail
	} from '@/api/verity.js'

	export default {
		components: {
			Verify
		},
		data() {
			return {
				emailForm: {
					number: '',
					code: ''
				},
				time: 180
			}
		},
		created() {
			this.time = 180
			this.emailForm = {
				number: '',
				code: ''
			}
		},
		methods: {
			// 处理点击发送验证码事件
			handleSendEmailCode() {
				//定义表单规则
				const rule = [{
					name: "number",
					checkType: "email",
					errorMsg: "邮箱格式不正确"
				}]
				// 进行表单校验
				const checkRes = graceChecker.check(this.emailForm, rule);
				if (checkRes) {
					// 调用行为验证码
					this.$refs.verify.show()
				} else {
					this.$refs.message.error({
						title: graceChecker.error,
						duration: 2000
					})
				}
			},
			// 发送邮箱验证码
			sendEmailCode() {
				sendEmailCode(this.emailForm.number).then(res => {
					this.$refs.message.success({
						title: '验证码发送成功，请登陆邮箱查看',
						duration: 4000
					})
					const count = setInterval(() => {
						if (this.time == 0) {
							clearInterval(count)
							this.time = 180
						}
						this.time--
					}, 1000)
				}).catch((err) => {
					this.$refs.message.error({
						title: err.msg,
						duration: 4000
					})
				})
			},
			// 点击表单提交处理函数
			handleBandEmail() {
				//定义表单规则
				const rule = [{
						name: "number",
						checkType: "email",
						errorMsg: "邮箱格式不正确"
					},
					{
						name: "code",
						checkType: "string",
						checkRule: "6,6",
						errorMsg: "验证码长度应为6位"
					}
				]
				// 进行表单校验
				const checkRes = graceChecker.check(this.emailForm, rule);
				if (checkRes) {
					// 发送后端，请求修改邮箱
					this.bandEmail()
				} else {
					this.$refs.message.error({
						title: graceChecker.error,
						duration: 2000
					})
				}
			},
			// 绑定邮箱去请求
			bandEmail() {
				bandEmail(this.emailForm).then(res => {
					this.$refs.message.success({
						title: res.msg,
						duration: 2000
					})
					uni.navigateBack()
				}).catch((err) => {
					this.$refs.message.error({
						title: err.msg,
						duration: 2000
					})
				})
			}
		}
	}
</script>

<style>

</style>
